<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="query">
        <Back label="选择报价方案" />
        <!-- <a-form layout="inline" class="query-form" :model="queryForm">
          <a-form-item>
            <a-input style="width: 170rem" v-model:value="queryForm.templateName" placeholder="输入方案名称" />
          </a-form-item>
          <a-form-item>
            <a-select style="width: 170rem" v-model:value="queryForm.schemeType" placeholder="选择方案类型">
              <a-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-select style="width: 170rem" v-model="queryForm.c" placeholder="选择租赁期限">
              <a-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-select style="width: 170rem" v-model="queryForm.d" placeholder="选择计算方式">
              <a-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button class="submit" type="primary" @click="onSubmit">查询</a-button>
            <a-button class="cancel">重置</a-button>
          </a-form-item>
        </a-form> -->
      </div>
      <div class="content1">
        <div class="item" v-for="item in data" :key="item.id" @click="onNav(item)">{{ item.templateName }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { reactive, toRefs, onBeforeMount, onMounted, ref } from 'vue';
  import Back from '/@/components/go-back/index.vue';
  import { useRoute, useRouter } from 'vue-router';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const data = ref([]);
  const bussNo = ref('');
  const queryForm = ref({
    templateName: '',
    schemeType: '',
    c: '',
    d: '',
  });
  async function getData() {
    const res = await rzApplyApi.configList({});
    if (res.code == 0) {
      data.value = [{ id: '0', templateName: '常规报价' }].concat(...res.data);
    }
  }
  const onSubmit = () => {};
  const onNav = (item) => {
    router.push({
      path: '/zjCount/counter',
      query: {
        priceSchemeId: item.id,
        bussNo: bussNo.value,
      },
    });
  };
  onMounted(() => {
    const query = route.query;
    bussNo.value = query.bussNo;
    getData();
  });
</script>
<style scoped lang="less">
  .app-page {
    display: flex;
    flex-direction: column;
    .submit {
      background-color: #fc5451 !important;
    }
    .cancel {
      background: #c8c8c8 !important;
    }
    .query {
      width: 100%;
      display: flex;
      padding: 24rem;
      box-sizing: border-box;
      justify-content: space-between;

      .form {
        float: 1;
        display: flex;
      }
    }
    .content1 {
      padding: 1rem 0 0 24rem;

      overflow: auto;
      .item {
        float: left;
        width: 550rem;
        height: 71px;
        line-height: 71px;
        font-size: 18px;
        color: #000000;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        margin-right: 43px;
        margin-bottom: 43px;
        padding: 0 23px;
        box-sizing: border-box;

        &:hover {
          background: #eb5f18;
          box-shadow: 0px 0px 15px 0px rgba(239, 51, 48, 0.28);
          color: #fff;
        }
      }
    }
  }
</style>
